<template>
    <el-card>
        <div slot="header" class="clearfix">
            <h3>专业数据</h3>
        </div>
        <div class="tools-box">
            <!-- 新增专业栏 -->
            <div class="tools-item">
                <h4>新增专业</h4>
                <div class="add-box">
                    <span>专业名称:</span>
                    <el-input v-model="addSubjectData.name"></el-input>
                    <el-button type="primary" @click="addOneSubjectsSubmit">确认增加</el-button>
                </div>
            </div>
            <!-- 搜索栏 -->
            <div class="tools-item">
                <h4>专业搜索</h4>
                <div class="search-box">
                    <el-select v-model="subjectsSearchData.type" placeholder="请选择">
                        <el-option label="专业名称" value="name"></el-option>
                    </el-select>
                    <el-input v-model='subjectsSearchData.value' placeholder="请输入内容"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="searchSubjects">搜索</el-button>
                </div>
            </div>
        </div>
        <!-- 专业数据列表渲染栏 -->
        <el-table :data="subjectsData" stripe style="width: 100%">
            <el-table-column prop="_id" label="专业编号" align="center">
            </el-table-column>
            <el-table-column prop="name" label="专业名称" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="toUpdateVue(scope.row._id,scope.row.name)">修改</el-button>
                    <el-button size="mini" type="danger" @click="deleteOneSubjectSubmit(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 页面数据和分页等 -->
        <div class="pages-data">
            <el-row>
                <el-col :span="8">
                    <el-pagination layout="total" :total="total">
                    </el-pagination>
                </el-col>
                <el-col :span="8">
                    <el-pagination :current-page="subjectsSearchData.currentPage" @current-change="handleCurrentChange"
                        :page-size="subjectsSearchData.pageSize" layout="prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </el-col>
                <el-col :span="8">
                    <el-pagination :page-sizes="[4, 8, 12, 16]" @size-change="handleSizeChange"
                        :page-size="subjectsSearchData.pageSize" layout="sizes">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>

        <!-- 修改界面模态框  本身不显示，放在html内任何地方都可以-->
        <el-dialog title="修改专业" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div class="add-box">
                <span>专业名称:</span>
                <el-input v-model="updateSubjectData.name"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateOneSubjectSumit">确 定</el-button>
            </span>
        </el-dialog>
    </el-card>
</template>

<script>
    import {
        createNamespacedHelpers
    } from "vuex";
    // 引入专业辅助函数
    const {
        mapState,
        mapMutations,
        mapActions
    } = createNamespacedHelpers(
        "subjects"
    );
    export default {
        data() {
            return {
                dialogVisible: false,
                addSubjectData: {
                    name: '',
                },
                updateSubjectData: {
                    _id: '',
                    name: '',
                },
            }
        },
        computed: {
            ...mapState([
                "pages",
                "total",
                "subjectsData",
                "subjectsSearchData",
            ]),
        },
        mounted() {
            // 进入页面加载专业列表
            this.getSubjects();
        },
        watch: {
            "subjectsSearchData.currentPage"() {
                this.getSubjects();
            },
            "subjectsSearchData.pageSize"() {
                this.getSubjects();
            },
            "subjectsSearchData.value"(val) {
                if (!val) {
                    this.getSubjects();
                }
            }
        },
        methods: {
            ...mapMutations(["setCurrentPage", "setPageSize"]),
            ...mapActions(["getSubjects", "deleteOneSubject", "updateOneSubject", "addOneSubjects"]),
            // 新增一个专业
            async addOneSubjectsSubmit() {
                const res = await this.addOneSubjects(this.addSubjectData);
                if (res.code) {
                    this.$message({
                        message: '新增成功！',
                        type: 'success',
                        center: true,
                    });
                    this.getSubjects();
                } else {
                    this.$message({
                        message: '新增失败！',
                        type: 'error',
                        center: true,
                    });
                }
            },
            // 删除一个专业
            async deleteOneSubjectSubmit(_id) {
                const res = await this.deleteOneSubject(_id);
                if (res.code) {
                    this.$message({
                        message: '删除成功！',
                        type: 'success',
                        center: true,
                    });
                    this.getSubjects();
                } else {
                    this.$message({
                        message: res.message || '删除失败！',
                        type: 'error',
                        center: true,
                    });
                };
            },
            // 修改专业
            async updateOneSubjectSumit() {
                const res = await this.updateOneSubject(this.updateSubjectData);
                if (res.code) {
                    this.$message({
                        message: '修改成功！',
                        type: 'success',
                        center: true,
                    });
                    this.getSubjects();
                } else {
                    this.$message({
                        message: '修改失败！',
                        type: 'error',
                        center: true,
                    });
                }
                this.dialogVisible = false;
            },
            handleSizeChange(val) {
                this.setPageSize(val);
            },
            handleCurrentChange(val) {
                this.setCurrentPage(val);
            },
            // 修改界面
            toUpdateVue(_id, name) {
                // 打开修改专业界面
                this.dialogVisible = true;
                this.updateSubjectData._id = _id;
                this.updateSubjectData.name = name;
            },
            // 关闭修改模态框
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            // 搜索专业
            searchSubjects() {
                this.getSubjects();
            }
        },
    }
</script>

<style lang="scss" scoped>
    .el-card {
        .el-dialog {
            .add-box {
                display: flex;
                align-items: center;

                span {
                    width: 130px;
                }
            }
        }

        ;

        .tools-box {
            display: flex;
            justify-content: space-between;

            .tools-item {
                width: 45%;

                h4 {
                    margin: 10px 0px;
                }

                .add-box {
                    display: flex;
                    align-items: center;

                    span {
                        width: 120px;
                    }
                }

                .search-box {
                    width: 100%;
                    display: flex;
                }
            }
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .el-row {
            padding: 10px 5px;

            .el-col {
                &:last-child {
                    text-align: right;
                }
            }
        }

        .el-button-group {
            padding: 20px 0px;
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .pages-data {
            margin-top: 20px;
            width: 100%;
        }
    }
</style>